<template>
	<view class="index">
		<!-- #fc4a17导航栏#007AFF -->
		<!-- <al-navbar bgColor="#8F4B2B" goPage="/pages/search/search" @rightClick="toMessage"></al-navbar> -->
		<al-nav-bar></al-nav-bar>
		<!-- <uni-nav-bar :statusBar :border="false" left-text="返回" right-text="设置" title="导航栏组件" /> -->
		<!-- tab选项卡 -->
		<view style="padding: 0 20rpx;background-color: #8F4B2B;color: #fff;position: relative;border: none;">
			<al-tabs :list="tabList" bg="#8F4B2B" :current="tabCurrent" @change="tabChange"></al-tabs>
		</view>
		<view v-if="!tabCurrent">
			<!-- 轮播图 -->
			<view class="banner-box">
				<!-- <view v-if="!tabCurrent" class="bor-bg"></view> -->
				<swiper class="swiper" :indicator-dots="true" :autoplay="true" :interval="5000" :duration="500">
					<swiper-item v-for="(item,index) in banners" :key="index">
						<view class="swiper-item">
							<image @click="bannerClick(index)" :src="item.image_src" mode="widthFix"></image>
						</view>
					</swiper-item>
				</swiper>
			</view>
			<view style="padding: 20rpx;">
				<uni-notice-bar scrollable single showIcon :speed="60"
					text="这是 NoticeBar 通告栏，这是 NoticeBar 通告栏，这是 NoticeBar 通告栏"></uni-notice-bar>
				<!-- 宫格导航栏 -->
				<view class="al-box">
					<al-grid :column="5" :list="gradList"></al-grid>
				</view>
				<view class="between-line" style="margin: 50rpx 0 30rpx 0;">
					<view class="line"></view>
					<text>精品推荐</text>
					<view class="line"></view>
				</view>
				<al-glist :data="dayBlastList" clickUrl="/pages/show/show" :reflectKey="reflectKey"></al-glist>
			</view>
		</view>
		<!-- 分类吧 -->
		<view v-else>
			<view class="category">
				<al-glist :data="goodsByCategory" clickUrl="/pages/show/show" :reflectKey="reflectKey"></al-glist>
			</view>
		</view>
	</view>
</template>

<script>
 
	
	import {
		getswiperdata
	} from '@/apis/indexyemian.js'
	
 
	export default {
		data() {
			return {
				title: 'Hello',
				cid: 0,
				tabCurrent: 0,
				tabList: [],
				banners: [],
				params: {
					'pageId': 1,
					'pageSize': 10,
				},
				reflectKey: {
					id: 'id',
					image: 'mainPic',
					price: 'actualPrice',
					delPrice: 'originalPrice',
					coupon: 'couponPrice',
					saleNum: 'monthSales',
					platform: 'platform'
				},
				dayBlastList: [],
				goodsByCategory: [],
				gradList: [{
						icon: '../../static/icons/taobao.png',
						name: '淘宝'
					},
					{
						icon: '../../static/icons/pinduoduo.png',
						name: '拼多多'
					},
					{
						icon: '../../static/icons/youxuan.png',
						name: '自营优选'
					},
					{
						icon: '../../static/icons/jingdong.png',
						name: '京东'
					},
					{
						icon: '../../static/icons/suning.png',
						name: '苏宁易购'
					},
					{
						icon: '../../static/icons/weipinhui.png',
						name: '唯品会'
					},
					{
						icon: '../../static/icons/baoyou.png',
						name: '9.9包邮'
					},
					{
						icon: '../../static/icons/meituan.png',
						name: '美团'
					},
					{
						icon: '../../static/icons/elm.png',
						name: '饿了么'
					},
					{
						icon: '../../static/icons/miaosha.png',
						name: '今日秒杀'
					},
				],
			}
		},
		onLoad() {
			//获取轮播图
			this.getSwiperList()
		},
		methods: {
			async getSwiperList() {
					const {
						data: res
					} = await getswiperdata()
					// 请求失败
					if (res.meta.status !== 200) return uni.$showMsg()
			
					this.banners = res.message
				},
			//搜索右侧图标点击事件
			toMessage() {
				 
			},
			tabChange(index) {
				 
			},
			 
		}
	}
</script>

<style lang="scss">
	.banner-box {
		margin-top: 10px;
		margin-left: 10px;
		margin-right: 10px;
		// padding: 0 20rpx;x
		position: relative;

		// margin-bottom: 20rpx;
		.swiper-item {
			border-radius: 8px;
			overflow: hidden;

			image {
				width: 100%;
				border-radius: 8px;
			}
		}
	}

	.between-line {
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 28rpx;
		color: #111;
		font-weight: bold;

		text {
			margin: 0 5px;
		}

		.line {
			height: 1rpx;
			width: 90rpx;
			background-color: #8c8c8c;
		}
	}

	.bor-bg {
		border: none;
		position: absolute;
		top: 0;
		// left: -12%;
		// right: -12%;
		height: 240rpx;
		background-color: #8F4B2B;
		border-radius: 0 0 50% 50%;
	}

	.category {
		padding: 30rpx;
	}
</style>
